<template>
    <van-search v-model="inputVal" shape="round" placeholder="请输入搜索关键词" />
    <van-tree-select v-model:main-active-index="activeIndex" height="100%" :items="proList" @click="showCategoryBrandList">
        <template #content>
            <div v-for="(i) in thisitem" class="itemsgood">
                <div @click="topath(i.brand)">
                    {{ i.brand }}
                </div>
            </div>
        </template>
    </van-tree-select>
</template>


<script setup lang="ts">
import { cateGoryList, categoryBrandList } from '@/api/api'
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const proList: Ref<any[]> = ref([])  //产品大类
const activeIndex = ref(0);
const thisitem: Ref<any[]> = ref([])
const showCategoryList = async () => {
    const res = await cateGoryList() as any;
    if (res.data.code === '200') {
        res.data.data.forEach((item: string, index: number) => {
            proList.value[index] = { text: item }
        })
        showCategoryBrandList()
    }
}

const showCategoryBrandList = async () => {
    const params = proList.value[activeIndex.value].text
    const res: any = await categoryBrandList(params)
    if (res.data.code === '200') {
        thisitem.value = res.data.data
    }
}
const topath = async (item: any) => {
    const params = {
        count: 1,
        limitNum: 10,
        category: proList.value[activeIndex.value].text,
        brand: item
    }
    router.push({
        path: '/pdcclass',
        query: {
            category: params.category,
            brand: item
        }
    })

}
const inputVal = ref('')
onMounted(() => {
    showCategoryList()
})
</script>


<style lang="scss" scoped>
.itemsgood {
    display: flex;
    justify-content: space-evenly;

    div {
        color: white;
        text-align: center;
        line-height: 50px;
        border-radius: 10%;
        margin: 15px 0;
        background-color: rebeccapurple;
        padding: 0 20px;
    }
}
</style>